<template>
    <view class="container">
        <view class="profile-info" @tap="goLogin">
            <image class="avatar" :src="userInfo.avatarUrl"></image>
            <view class="info">
                <text class="name">{{ userInfo.nickName }}</text>
            </view>
        </view>

        <view class="separate"></view>

        <view class="user_area">
            <view class="user_row" @tap="goOrder">
                <view class="user_row_left">我的订单</view>
                <van-icon class="user_row_right" name="arrow" />
            </view>
            <view class="user_column">
                <view class="user_column_item" @tap="goOrderIndex" data-index="1" data-route="/pages/ucenter/order/order">
                    <text class="user_column_item_badge" v-if="order.unpaid != 0">{{ order.unpaid }}</text>
                    <image class="user_column_item_image" src="/static/images/pendpay.png"></image>
                    <view class="user_column_item_text">待付款</view>
                </view>
                <view class="user_column_item" @tap="goOrderIndex" data-index="2" data-route="/pages/ucenter/order/order">
                    <text class="user_column_item_badge" v-if="order.unship != 0">{{ order.unship }}</text>
                    <image class="user_column_item_image" src="/static/images/send.png"></image>
                    <view class="user_column_item_text">待发货</view>
                </view>
                <view class="user_column_item" @tap="goOrderIndex" data-index="3" data-route="/pages/ucenter/order/order">
                    <text class="user_column_item_badge" v-if="order.unrecv != 0">{{ order.unrecv }}</text>
                    <image class="user_column_item_image" src="/static/images/receive.png"></image>
                    <view class="user_column_item_text">待收货</view>
                </view>
                <view class="user_column_item" @tap="goOrderIndex" data-index="4" data-route="/pages/ucenter/order/order">
                    <text class="user_column_item_badge" v-if="order.uncomment != 0">{{ order.uncomment }}</text>
                    <image class="user_column_item_image" src="/static/images/comment.png"></image>
                    <view class="user_column_item_text">待评价</view>
                </view>
                <view class="user_column_item" @tap="goAfterSale">
                    <image class="user_column_item_image" src="/static/images/aftersale.png"></image>
                    <view class="user_column_item_text">售后</view>
                </view>
            </view>
        </view>

        <view class="separate"></view>

        <view class="user_row">
            <view class="user_row_left">核心服务</view>
        </view>
        <view class="user_column">
            <view class="user_column_item" @tap="goCoupon">
                <image class="user_column_item_image" src="/static/images/coupon.png"></image>
                <view class="user_column_item_text">优惠卷</view>
            </view>
            <view class="user_column_item" @tap="goCollect">
                <image class="user_column_item_image" src="/static/images/collect.png"></image>
                <view class="user_column_item_text">收藏夹</view>
            </view>
            <view class="user_column_item" @tap="goFootprint">
                <image class="user_column_item_image" src="/static/images/footprint.png"></image>
                <view class="user_column_item_text">浏览足迹</view>
            </view>
            <view class="user_column_item" @tap="goGroupon">
                <image class="user_column_item_image" src="/static/images/group.png"></image>
                <view class="user_column_item_text">我的拼团</view>
            </view>

            <view class="user_column_item" @tap="goAddress">
                <image class="user_column_item_image" src="/static/images/address.png"></image>
                <view class="user_column_item_text">地址管理</view>
            </view>
        </view>
        <view class="separate"></view>

        <view class="user_row">
            <view class="user_row_left">必备工具</view>
        </view>
        <view class="user_column">
            <button class="user_column_item_phone" open-type="getPhoneNumber" @getphonenumber="bindPhoneNumber">
                <image class="user_column_item_image" src="/static/images/mobile.png"></image>
                <view class="user_column_item_text">绑定手机</view>
            </button>
            <view class="user_column_item" @tap="goHelp">
                <image class="user_column_item_image" src="/static/images/help.png"></image>
                <view class="user_column_item_text">帮助中心</view>
            </view>
            <view class="user_column_item" @tap="goFeedback">
                <image class="user_column_item_image" src="/static/images/feedback.png"></image>
                <view class="user_column_item_text">意见反馈</view>
            </view>
            <view class="user_column_item">
                <contact-button style="opacity: 0; position: absolute" type="default-dark" session-from="weapp" size="27"></contact-button>
                <image class="user_column_item_image" src="/static/images/customer.png"></image>
                <view class="user_column_item_text">联系客服</view>
            </view>
            <view class="user_column_item" @tap="aboutUs">
                <image class="user_column_item_image" src="/static/images/about.png"></image>
                <view class="user_column_item_text">关于我们</view>
            </view>
        </view>
        <view class="separate"></view>

        <view class="logout" v-if="hasLogin" @tap="exitLogin">退出登录</view>
    </view>
</template>

<script>
var util = require('../../../utils/util.js');

var api = require('../../../config/api.js');

var user = require('../../../utils/user.js');

var app = getApp();
export default {
    data() {
        return {
            userInfo: {
                nickName: '点击登录',
                avatarUrl: '/static/images/my.png'
            },
            order: {
                unpaid: 0,
                unship: 0,
                unrecv: 0,
                uncomment: 0
            },
            hasLogin: false
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
    },
    onReady: function () {},
    onShow: function () {
        //获取用户的登录信息
        if (app.globalData.hasLogin) {
            let userInfo = uni.getStorageSync('userInfo');
            this.setData({
                userInfo: userInfo,
                hasLogin: true
            });
            let that = this;
            util.request(api.UserIndex).then(function (res) {
                if (res.errno === 0) {
                    that.setData({
                        order: res.data.order
                    });
                }
            });
        }
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        goLogin() {
            if (!this.hasLogin) {
                uni.navigateTo({
                    url: '/pages/auth/login/login'
                });
            }
        },

        goOrder() {
            if (this.hasLogin) {
                try {
                    uni.setStorageSync('tab', 0);
                } catch (e) {}

                uni.navigateTo({
                    url: '/pages/ucenter/order/order'
                });
            } else {
                uni.navigateTo({
                    url: '/pages/auth/login/login'
                });
            }
        },

        goOrderIndex(e) {
            if (this.hasLogin) {
                let tab = e.currentTarget.dataset.index;
                let route = e.currentTarget.dataset.route;

                try {
                    uni.setStorageSync('tab', tab);
                } catch (e) {}

                uni.navigateTo({
                    url: route,
                    success: function (res) {},
                    fail: function (res) {},
                    complete: function (res) {}
                });
            } else {
                uni.navigateTo({
                    url: '/pages/auth/login/login'
                });
            }
        },

        goCoupon() {
            if (this.hasLogin) {
                uni.navigateTo({
                    url: '/pages/ucenter/couponList/couponList'
                });
            } else {
                uni.navigateTo({
                    url: '/pages/auth/login/login'
                });
            }
        },

        goGroupon() {
            if (this.hasLogin) {
                uni.navigateTo({
                    url: '/pages/groupon/myGroupon/myGroupon'
                });
            } else {
                uni.navigateTo({
                    url: '/pages/auth/login/login'
                });
            }
        },

        goCollect() {
            if (this.hasLogin) {
                uni.navigateTo({
                    url: '/pages/ucenter/collect/collect'
                });
            } else {
                uni.navigateTo({
                    url: '/pages/auth/login/login'
                });
            }
        },

        goFeedback(e) {
            if (this.hasLogin) {
                uni.navigateTo({
                    url: '/pages/ucenter/feedback/feedback'
                });
            } else {
                uni.navigateTo({
                    url: '/pages/auth/login/login'
                });
            }
        },

        goFootprint() {
            if (this.hasLogin) {
                uni.navigateTo({
                    url: '/pages/ucenter/footprint/footprint'
                });
            } else {
                uni.navigateTo({
                    url: '/pages/auth/login/login'
                });
            }
        },

        goAddress() {
            if (this.hasLogin) {
                uni.navigateTo({
                    url: '/pages/ucenter/address/address'
                });
            } else {
                uni.navigateTo({
                    url: '/pages/auth/login/login'
                });
            }
        },

        bindPhoneNumber: function (e) {
            if (e.detail.errMsg !== 'getPhoneNumber:ok') {
                // 拒绝授权
                return;
            }

            if (!this.hasLogin) {
                uni.showToast({
                    title: '绑定失败：请先登录',
                    icon: 'none',
                    duration: 2000
                });
                return;
            }

            util.request(
                api.AuthBindPhone,
                {
                    iv: e.detail.iv,
                    encryptedData: e.detail.encryptedData
                },
                'POST'
            ).then(function (res) {
                if (res.errno === 0) {
                    uni.showToast({
                        title: '绑定手机号码成功',
                        icon: 'success',
                        duration: 2000
                    });
                }
            });
        },

        goAfterSale: function () {
            if (this.hasLogin) {
                uni.navigateTo({
                    url: '/pages/ucenter/aftersaleList/aftersaleList'
                });
            } else {
                uni.navigateTo({
                    url: '/pages/auth/login/login'
                });
            }
        },

        aboutUs: function () {
            uni.navigateTo({
                url: '/pages/about/about'
            });
        },

        goHelp: function () {
            uni.navigateTo({
                url: '/pages/help/help'
            });
        },

        exitLogin: function () {
            uni.showModal({
                title: '',
                confirmColor: '#b4282d',
                content: '退出登录？',
                success: function (res) {
                    if (!res.confirm) {
                        return;
                    }

                    util.request(api.AuthLogout, {}, 'POST');
                    app.globalData.hasLogin = false;
                    uni.removeStorageSync('token');
                    uni.removeStorageSync('userInfo');
                    uni.reLaunch({
                        url: '/pages/index/index'
                    });
                }
            });
        }
    }
};
</script>
<style>
@import './index.css';
</style>
